<template>
  <div class="father">
    <h1>Father - Father - Father - 父传子</h1>
    <div class="f"> {{ `父亲有的：房子：${hourse}套， 资产：${money}` }}</div>
    <hr>
  </div>
  <Son @changeNum="change" :fatherAll="fatherAll" :num="1"></Son>
</template>

<script setup lang='ts' name="father">
import { reactive, ref, toRefs, provide } from 'vue';
import Son from "./Son.vue";
interface Father {
  hourse: string | number,
  money: number
}
const fatherAll: Father = reactive({
  hourse: 1,
  money: 100000
})
let { hourse, money } = toRefs(fatherAll)
// 组传孙
provide('fatherAllContext', { f: fatherAll, updateMoney })

// 孙传组
function updateMoney(val: number) {
  money.value -= val
}
function change(params: any) {
  console.log(params, 'params1111111111111');
}
</script>

<style scoped>
.father {
  width: 100%;
  height: 30vh;
  background-color: antiquewhite;
  border: 1px solid red;
  font-size: 28px;
}

.f {
  color: green;
}

.s {
  color: red;
}
</style>